<template>
  <div>
    <div class="message">
      <el-row class="tac">
        <el-col :span="7">
          <el-menu
            :router="true"
            :default-active="active"
            active-text-color="red"
          >
            <el-menu-item
              index="1"
              route="/message/comment"
            >
              <i
                class="iconfont icon-xiaoxi1"
                style="color:#ea6f5a"
              ></i>
              <span slot="title">评论</span>
            </el-menu-item>
            <el-menu-item
              index="2"
              route="/message/simpleletter"
            >
              <i
                class="iconfont icon-youjian"
                style="color:#ea6f5a"
              ></i>
              <span slot="title">简信</span>
            </el-menu-item>
            <el-menu-item
              index="3"
              route="/message/contribute"
            >
              <i
                class="iconfont icon-shangchuan"
                style="color:#ea6f5a"
              ></i>
              <span slot="title">投稿请求</span>
            </el-menu-item>
            <el-menu-item
              index="4"
              route="/message/receivedlike"
            >
              <i
                class="iconfont icon-xihuan"
                style="color:#ea6f5a"
              ></i>
              <span slot="title">喜欢和赞</span>
            </el-menu-item>
            <el-menu-item
              index="5"
              route="/message/allattention"
            >
              <i
                class="iconfont icon-yiguanzhu"
                style="color:#ea6f5a"
              ></i>
              <span slot="title">关注</span>
            </el-menu-item>
            <el-menu-item
              index="6"
              route="/message/payment"
            >
              <i
                class="iconfont icon-dashang1"
                style="color:#ea6f5a"
              ></i>
              <span slot="title">赞赏和付费</span>
            </el-menu-item>
            <el-menu-item
              index="7"
              route="/message/otherremind"
            >
              <i
                class="iconfont icon-qita"
                style="color:#ea6f5a"
              ></i>
              <span slot="title">其他提醒</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col
          :span="16"
          :offset="1"
        >
          <router-view></router-view>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "message",
  data() {
    return {
      active: "1",
    };
  },
  mounted() {
    console.log(this.$route.path);
    switch (this.$route.path) {
      case "/message/comment":
        this.active = "1";
        break;
      case "/message/simpleletter":
        this.active = "2";
        break;
      case "/message/contribute":
        this.active = "3";
        break;
      case "/message/receivedlike":
        this.active = "4";
        break;
      case "/message/allattention":
        this.active = "5";
        break;
      case "/message/payment":
        this.active = "6";
        break;
      case "/message/otherremind":
        this.active = "7";
        break;

      default:
        break;
    }
  },
};
</script>

<style scoped>
.message {
  width: 66.6%;
  margin: 0 auto;
  margin-top: 6.25rem;
}
.iconfont {
  font-size: 1.6rem;
  padding-right: 0.7rem;
}
.el-menu-item:hover {
  background-color: #f0f0f0;
}
</style>